<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
  function createAjax(){
	  if(window.XMLHttpRequest)
		  return new XMLHttpRequest();
	  
	  return new ActiveXObject("Microsoft.XMLHTTP");
  }
  function checkTele(p){
	  if(p.value=="")
		  return false;
	 let xhr= createAjax();
	 let url="checkTeleRepeat?telephone="+p.value;
	 xhr.onreadystatechange=function(){
	 	if(xhr.readyState==4&&xhr.status==200){
	 		alert(xhr.responseText);
	 		//服务器返回True表示重复,其他表示不重复
	 		if(xhr.responseText=="true"){
	 			alert("此手机号已经被注册");
	 			document.getElementById("BtnAdd").disabled=true;
	 		}else{
	 			alert("此手机号可用");
	 			document.getElementById("BtnAdd").disabled=false;
	 		}
	 	}
	 }//原生ajax
	 xhr.open("GET",url,true);
	 xhr.send(null);
  }
</script>
</head>
<body>
<h2>添加新生</h2>
<form method="post" action="doAddStudent.jsp" enctype="multipart/form-data">
 <p>
  <input type="text" required="required" name="sname" placeholder="姓名"/>
 </p>
 <p>
 <input type="text" name="qq" placeholder="QQ"/>
 <input type="text" name="wechat" placeholder="微信号"/>
 <input type="text" name="telephone" pattern="\d{11,15}" onblur="checkTele(this)" placeholder="手机号"/>
 </p>
 <p>
 年级:
 <select name="gradeid">
 	<c:forEach items="${grades}" var="g">
 	<option value="${g.id}">${g.gname}</option>
 	</c:forEach>
 	 
 </select>
 身份照照片:<input type="file" name="idcardpicture"/>
 <br/>
 <input type="submit" id="BtnAdd"/>
 </p>
</form>
</body>
</html>